<template>
  <!-- 记录卡片 -->
  <view class="wallet-log-box">
    <scroll-view
    :scroll-y="true"
    class="scroll-view"
    @scrolltolower="onReachBottom"
  >
    <i-card
      padding="24rpx"
      :width="0"
      top="24rpx"
      v-for="item in withdrawLog"
      :key="item.id"
    >
      <view class="head">
        <view class="title">划转类型</view>
        <view class="num">{{ exchangeType(item) }}</view>
      </view>
      <view class="time-box">
        <text class="item-title">划转金额</text>
        <view class="time"
          ><text>{{ item.amount }} </text> 元</view
        >
      </view>
      <view class="time-box">
        <text class="item-title">划转时间</text>
        <view class="time">{{ item.createTime }}</view>
      </view>
    </i-card>
    <!-- 更多 -->
    <i-more v-if="!isEmpty" :status="loadStatus" />
    <!-- 空置页 -->
    <i-notData v-if="isEmpty"></i-notData>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { exchangeOrderList } from "../../api/index";
// 数据定义
const withdrawLog = ref<any[]>([]);
const loadStatus = ref<"loadmore" | "loading" | "nomore">("loadmore");
const currentPage = ref(1);
const isEmpty = ref(false);

const formData = reactive({
  total: 0,
  ypageNum: 1,
  ypageSize: 10,
});

const exchangeTypeList = [
  { value: 0, label: "佣金金额" },
  { value: 1, label: "充电收益" },
  { value: 2, label: "经销商销售收益" },
  { value: 7, label: "渠道收益" },
];

// 获取划转类型
const exchangeType = (item: any) => {
  const type = exchangeTypeList.find((i) => i.value === item.exchangeType);
  return type ? type.label : "-";
};

// 获取划转记录
const getLog = async () => {
  loadStatus.value = "loading";
  const res = await exchangeOrderList({
    ypageNum: formData.ypageNum,
    ypageSize: formData.ypageSize,
  });
  if (res.code === 200) {
    withdrawLog.value = withdrawLog.value.concat(res.rows);
    isEmpty.value = !withdrawLog.value.length;
    formData.total = res.total;
    loadStatus.value =
      withdrawLog.value.length < formData.total ? "loadmore" : "nomore";
  }
};

// 触底加载更多
const onReachBottom = () => {
  if (withdrawLog.value.length < formData.total) {
    formData.ypageNum += 1;
    getLog();
  }
};

// 初始化加载
onLoad(() => {
  getLog();
});
</script>

<style lang="scss" scoped>
.wallet-log-box {
  padding: 0 30rpx;
 box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 88rpx);
  overflow: hidden;
}
.scroll-view {
  width: 100%;
  height: 100%
}

.head {
  @include flexRS;
  margin-bottom: 8rpx;

  .title {
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
  }
  .num {
    font-size: 28rpx;
    font-weight: 500;
    color: #ff9400;
  }
}
.time-box {
  @include flexRS;
  margin-top: 12rpx;

  .item-title {
    font-size: 24rpx;
    font-weight: 400;
    color: #666;
  }
  .time {
    font-size: 24rpx;
    font-weight: 400;
    color: #666;
    text {
      font-family: DIN Alternate, DIN Alternate;
      font-weight: bold;
      font-size: 36rpx;
      color: #222222;
    }
  }
}
</style>
